<template>
    <el-row class="header" justify="space-between">
      <el-row>
        <a href="/" target="_self">
          <div class="logo">
            <img src="../../../assets/icons/mylogo.png" alt="logo"/>
          </div>
        </a>
        <div class="box">
          <div class="search-box">
            <div class="input-wrapper">
              <input
                  type="text"
                  class="search-left"
                  placeholder="请输入要搜索的岗位"
                  v-model="searchQuery"
              >
              <span v-if="searchQuery" class="clear-icon" @click="clearSearch">×</span>
            </div>
<!--            <input type="text" class="search-left" placeholder="请输入要搜索的岗位" v-model="searchQuery">-->
            <input type="button" class="search-right" value="搜 索" @click="searchFor">
          </div>
        </div>
      </el-row>

      <div class="user-info">
        <el-button @click="mianPreview" style="margin-right: 10px">预览</el-button>
        <el-button size="large" type="primary" @click="loginClick" v-if="!data.user&&!data.adminUser">登录</el-button>
        <template v-else>
          <el-dropdown>
            <img  :src="getavata()" @error="data.showavatar=defaultAvatar" alt="" style="width: 30px; height: 30px; border-radius: 50%;">
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-link type="primary" @click="">求职中心</el-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-link type="primary" @click="">个人设置</el-link>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-link type="primary" @click="adminExit">退出</el-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>

      </div>
    </el-row>

</template>

<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import  defaultAvatar  from "@/assets/icons/defaultAvatar.png"
import SearchIcon from '@/assets/images/search-icon.svg'
import {ElMessage} from "element-plus";
import {listApi} from "@/api/thing";

const data = reactive({
  adminUser:localStorage.getItem('admin_user_name'),
  adminAvatar:localStorage.getItem('admin_user_avatar'),
  user: localStorage.getItem('user_name'),
  avatar:localStorage.getItem('user_avatar'),
  defaultAvatar,
  showavatar:'',
  keyword:''
})
const adminExit = () => {
  localStorage.removeItem('admin_user_name')
  localStorage.removeItem('admin_user_id')
  localStorage.removeItem('admin_token')
  localStorage.removeItem('admin_user_avatar')
  window.location.href = '/admin/login'
}
const handleError = (event) => {
  event.target.src = data.defaultAvatar;
}
const getavata=()=>{
  if (data.adminAvatar!==null){
    return data.adminAvatar
  }else if (data.avatar!==null){
    return data.avatar
  }else {
    return defaultAvatar
  }
}
const mianPreview = () => {
  window.open('http://localhost:8080/')
}

const loginClick=()=>{
  window.location.href='/userLogin'
}
const { emit } = getCurrentInstance();
const searchQuery = ref('');
const searchFor=async () => {
  if (searchQuery.value === '') {
    ElMessage.warning('请输入搜索内容');
    return;
  }
  const searchData = await listApi({keyword: searchQuery.value})
  emit('search-results', searchData);
}
const clearSearch = () => {
  searchQuery.value = ' ';
  searchFor();
  searchQuery.value = '';
};
</script>

<style scoped>
.header {
  padding: 2px 24px;
  background-color: #ffffff;
  border-bottom: 5px solid #F0F2F5;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.logo img {
  width: 40px;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin: 0 10px;
}
.avatar-dropdown {
  display: inline-block; /* 确保下拉菜单可以正确地定位到头像上 */
}

.box{
  text-align:center;
  font-size: 0;
  margin-left: 10px;
}
.search-box{
  margin:0 auto;
  width: 400px;
  display: flex;
}
.input-wrapper {
  position: relative;
  flex: 1;
}
.clear-icon {
  position: absolute;
  right: 10px;
  top: 60%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 20px;
  color: #ccc;
}
.search-left{
  text-indent: 20px;
  width: 100%;
  height:40px;
  border:rgb(137, 233, 217) 1px solid;
 float:left;
  margin-top:10px;
  border-bottom-left-radius:25px;
  border-top-left-radius:25px;
  outline:none;
  text-align:20px ;
  padding-right: 35px; /* 为清除图标预留空间 */

}
.search-right{
  width:19%;
  height:40px;
  background:rgb(137, 233, 217);
  color: #fff;
  border:none;
  margin-top:10px;
  border-bottom-right-radius:25px;
  border-top-right-radius:25px;
  outline:none;
  cursor: pointer;
}

</style>
